<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/include :: header('服务监控')"/>
    <style>
        .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .icon-blue {
            color: #1e9fff !important;
        }

        .icon-red {
            color: #f59bb3 !important;
        }

    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-pie-chart icon"></i>状态</div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3" id="cpu-chart" style="height: 250px;">

                    </div>
                    <div class="layui-col-md3" id="mem-chart" style="height: 250px;">

                    </div>
                    <div class="layui-col-md3" id="jvm-chart" style="height: 250px;">

                    </div>
                    <div class="layui-col-md3" id="disk-chart" style="height: 250px;">

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space10" style="margin-bottom: 15px;">
            <div class="layui-col-md6">
                <div class="layui-card" th:object="${cpu}">
                    <div class="layui-card-header"><i class="fa fa-creative-commons icon icon-red"></i>CPU</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="nob">
                            <tbody>
                            <tr>
                                <td>核心数</td>
                                <td th:text="*{cpuNum}">0个</td>
                            </tr>
                            <tr>
                                <td>用户使用率</td>
                                <td th:text="*{used + '%'}">0%</td>
                            </tr>
                            <tr>
                                <td>系统使用率</td>
                                <td th:text="*{sys + '%'}">0%</td>
                            </tr>
                            <tr>
                                <td>当前空闲率</td>
                                <td th:text="*{free + '%'}">0%</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card" th:object="${mem}">
                    <div class="layui-card-header"><i class="fa fa-meetup icon icon-red"></i>内存</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="nob">
                            <tbody>
                            <tr>
                                <td>总内存</td>
                                <td th:text="*{total + 'G'}">0GB</td>
                            </tr>
                            <tr>
                                <td>已用内存</td>
                                <td th:text="*{used + 'G'}">0GB</td>
                            </tr>
                            <tr>
                                <td>剩余内存</td>
                                <td th:text="*{free + 'G'}">0GB</td>
                            </tr>
                            <tr>
                                <td>使用率</td>
                                <td th:class="*{usage gt 80} ? 'layui-badge layui-bg-red'">[[*{usage}]]%</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card" th:object="${sys}">
            <div class="layui-card-header"><i class="fa fa-desktop icon icon-blue"></i>服务器信息</div>
            <div class="layui-card-body">
                <div style="width: 100%; height: 100px;">
                    <table class="layui-table" lay-skin="nob">
                        <tbody>
                        <tr>
                            <td>服务器名称:</td>
                            <td th:text="*{computerName}">Aster</td>
                            <td>操作系统:</td>
                            <td th:text="*{osName}">Linux</td>
                        </tr>
                        <tr>
                            <td>服务器IP:</td>
                            <td th:text="*{computerIp}">127.0.0.1</td>
                            <td>系统架构:</td>
                            <td th:text="*{osArch}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-card" th:object="${jvm}">
            <div class="layui-card-header"><i class="fa fa-align-justify icon"></i>Java虚拟机</div>
            <div class="layui-card-body">
                <div style="width: 100%; ">
                    <table class="layui-table" lay-skin="nob">
                        <tbody>
                        <tr>
                            <td>JVM总内存</td>
                            <td th:text="*{total + 'M'}">0MB</td>
                            <td>JVM已用内存</td>
                            <td th:text="*{used + 'M'}">0MB</td>
                        </tr>
                        <tr>
                            <td>JVM空闲内存</td>
                            <td th:text="*{free + 'M'}">0MB</td>
                            <td>JVM使用率</td>
                            <td th:text="*{usage + '%'}">0%</td>
                        </tr>

                        <tr>
                            <td>Java名称</td>
                            <td th:text="*{name}">Java</td>
                            <td>Java版本</td>
                            <td th:text="*{version}">1.8.0</td>
                        </tr>
                        <tr>
                            <td>启动时间</td>
                            <td th:text="*{startTime}">2018-12-31 00:00:00</td>
                            <td>运行时长</td>
                            <td th:text="*{runTime}">0天0时0分0秒</td>
                        </tr>
                        <tr>
                            <td colspan="1">安装路径</td>
                            <td colspan="3" th:text="*{home}"></td>
                        </tr>
                        <tr>
                            <td colspan="1">项目路径</td>
                            <td colspan="3" th:text="${sys.userDir}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-red"></i>磁盘信息</div>
            <div class="layui-card-body">
                <div style="width: 100%; ">
                    <table class="layui-table" lay-skin="nob">
                        <thead>
                        <tr>
                            <th>盘符路径</th>
                            <th>文件系统</th>
                            <th>盘符类型</th>
                            <th>总大小</th>
                            <th>可用大小</th>
                            <th>已用大小</th>
                            <th>已用百分比</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="disk,iterStat : ${disk}">
                            <td th:text="${disk.dirName}">C:\</td>
                            <td th:text="${disk.sysTypeName}">NTFS</td>
                            <td th:text="${disk.typeName}">local</td>
                            <td th:text="${disk.total}">0GB</td>
                            <td th:text="${disk.free}">0GB</td>
                            <td th:text="${disk.used}">0GB</td>
                            <td th:class="${disk.usage gt 80} ? 'layui-badge layui-bg-red'">[[${disk.usage}]]%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


    </div>
</div>
<th:block th:include="common/include :: footer"/>
<th:block th:include="common/include :: echarts"/>

<script th:inline="javascript">
    $(function () {
        initEcharts();
    });

    function initEcharts() {

        // cpu
        var cpuEcharts = echarts.init(document.getElementById('cpu-chart'));
        var cpuOption = getCpuOption();
        cpuEcharts.setOption(cpuOption);

        // mem
        var memEcharts = echarts.init(document.getElementById('mem-chart'));
        var memOption = getMemOption();
        memEcharts.setOption(memOption);

        // jvm
        var jvmEcharts = echarts.init(document.getElementById('jvm-chart'));
        var jvmOption = getJvmOption();
        jvmEcharts.setOption(jvmOption);

        // disk
        var diskEcharts = echarts.init(document.getElementById('disk-chart'));
        var diskOption = getDiskOption();
        diskEcharts.setOption(diskOption);

        setInterval(function () {
            $.ajax({
                type: 'GET',
                url: ctx + 'server/data',
                async: false,
                dataType: 'json',
                success: function (res) {
                    // cpu
                    cpuOption.series[0].data[0].value = res.data.cpu.usage;
                    cpuEcharts.setOption(cpuOption, true);
                    // mem
                    memOption.series[0].data[0].value = res.data.mem.usage;
                    memOption.series[0].data[1].value = 100 - res.data.mem.usage;
                    memOption.series[1].data[0].value = res.data.mem.usage;
                    memOption.series[1].data[1].value = 100 - res.data.mem.usage;
                    memEcharts.setOption(memOption, true);
                    // jvm
                    jvmOption.title.text = res.data.jvm.usage + '%' + '\n \n' + 'JVM使用率';
                    jvmOption.series[0].data = [
                        (res.data.jvm.usage / 100).toFixed(4),
                        {
                            value: (res.data.jvm.usage / 100).toFixed(4),
                            direction: 'left',
                        },
                    ];
                    jvmEcharts.setOption(jvmOption, true);
                    // disk
                    diskOption.series[0].detail.formatter = res.data.diskUsage + '%';
                    diskOption.series[0].data[0].value = res.data.diskUsage;
                    diskEcharts.setOption(diskOption, true);
                }
            });
        }, 100000);
    }

    function getCpuOption() {
        var cpuOption = {
            series: [{
                type: 'gauge',
                radius: "90%",
                detail: {
                    formatter: '{value}%'
                },
                data: [{
                    value: [[${cpu.usage}]],
                    name: 'CPU使用率',
                    title: {
                        offsetCenter: ["0", "80%"]
                    },
                    detail: {
                        fontSize: 20,
                        offsetCenter: [0, "30%"],
                        color: "rgb(159,163,241)"
                    }
                }],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [
                            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0.1,
                                color: "#30D27C"
                            },
                                {
                                    offset: 0.6,
                                    color: "#0B95FF"
                                },
                                {
                                    offset: 1,
                                    color: "#FFC600"
                                }
                            ])]
                        ]

                    }
                }
            }]
        };
        return cpuOption;
    }

    function getMemOption() {
        var memUsage = [[${mem.usage}]];
        var option = {
            title: {
                text: '内存使用率',
                top: '60%',
                left: 'center',
                textStyle: {
                    fontSize: 16,
                    color: '#bcbfff',
                },
            },
            series: [
                {
                    name: 'CPU分配率 内圈',
                    center: ['50%', '50%'],
                    radius: ['74%', '75%'],
                    clockWise: false,
                    hoverAnimation: false,
                    type: 'pie',
                    data: [
                        {
                            value: memUsage,
                            name: '',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{d} %',
                                    textStyle: {
                                        fontSize: 18,
                                        fontWeight: 'bold',
                                    },
                                    position: 'center',
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                normal: {
                                    color: '#5886f0',
                                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00a2ff',
                                        },
                                        {
                                            offset: 1,
                                            color: '#70ffac',
                                        },
                                    ]),
                                    borderWidth: 10,
                                },
                                emphasis: {
                                    color: '#5886f0',
                                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#85b6b2',
                                        },
                                        {
                                            offset: 1,
                                            color: '#6d4f8d',
                                        },
                                    ]),
                                    borderWidth: 10,
                                },
                            },
                        },
                        {
                            name: ' ',
                            value: 100 - memUsage,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false,
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    color: 'rgba(0,0,0,0)',
                                    borderColor: 'rgba(0,0,0,0)',
                                    borderWidth: 0,
                                },
                                emphasis: {
                                    color: 'rgba(0,0,0,0)',
                                    borderColor: 'rgba(0,0,0,0)',
                                    borderWidth: 0,
                                },
                            },
                        },
                    ],
                },
                {
                    name: 'CPU分配率 外圈',
                    center: ['50%', '50%'],
                    radius: ['89%', '90%'],
                    clockWise: false,
                    hoverAnimation: false,
                    type: 'pie',
                    data: [
                        {
                            value: memUsage,
                            name: '',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{d} %',
                                    textStyle: {
                                        fontSize: 18,
                                        fontWeight: 'bold',
                                    },
                                    position: 'center',
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                normal: {
                                    color: '#5886f0',
                                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00a2ff',
                                        },
                                        {
                                            offset: 1,
                                            color: '#70ffac',
                                        },
                                    ]),
                                    borderWidth: 1,
                                },
                                emphasis: {
                                    color: '#5886f0',
                                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#85b6b2',
                                        },
                                        {
                                            offset: 1,
                                            color: '#6d4f8d',
                                        },
                                    ]),
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: ' ',
                            value: 100 - memUsage,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false,
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    color: 'rgba(0,0,0,0)',
                                    borderColor: 'rgba(0,0,0,0)',
                                    borderWidth: 0,
                                },
                                emphasis: {
                                    color: 'rgba(0,0,0,0)',
                                    borderColor: 'rgba(0,0,0,0)',
                                    borderWidth: 0,
                                },
                            },
                        },
                    ],
                },
            ],
        };
        return option;
    }

    function getJvmOption() {
        var value = [[${jvm.usage}]];
        var data = [(value / 100).toFixed(4),
            {
                value: (value / 100).toFixed(4),
                direction: 'left',
            },
        ];
        var option = {
            title: {
                text: value + '%' + '\n \n' + 'JVM使用率',
                textStyle: {
                    fontSize: 22,
                    fontFamily: 'Microsoft Yahei',
                    fontWeight: 'normal',
                    color: 'rgba(0,0,0,0.39)',
                    rich: {
                        a: {
                            fontSize: 22,
                        }
                    }
                },
                x: 'center',
                y: '35%'
            },
            series: [
                {
                    type: 'liquidFill',
                    radius: '80%',
                    center: ['50%', '50%'],
                    data: data,
                    color: 'rgba(68, 145, 253, .25)',
                    backgroundStyle: {
                        borderWidth: 10,
                        color: {
                            type: 'linear',
                            x: 1,
                            y: 0,
                            x2: 0.5,
                            y2: 1,
                            colorStops: [{
                                offset: 1,
                                color: 'rgba(58, 71, 212, 0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(31, 222, 225, .2)'
                            }, {
                                offset: 0,
                                color: 'rgba(31, 222, 225, 1)'
                            }],
                        },
                    },
                    label: {
                        normal: {
                            formatter: '',
                        },
                    },
                    outline: {
                        show: false,
                    },
                },
                {
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['90%', '85%'],
                    hoverAnimation: false,
                    data: [
                        {
                            name: '',
                            value: value,
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                color: '#59D19C',
                            },
                            emphasis: {
                                labelLine: {
                                    show: false,
                                },
                                itemStyle: {
                                    color: '#5886f0',
                                },
                            },
                        },
                        {
                            //画剩余的刻度圆环
                            name: '',
                            value: 100 - value,
                            itemStyle: {
                                color: 'rgba(69, 229, 155, 0.48)',
                            },
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            emphasis: {
                                labelLine: {
                                    show: false,
                                },
                                itemStyle: {
                                    color: '#ffffff',
                                },
                            },
                        },
                    ],
                },
            ],
        };
        return option;
    }

    function getDiskOption() {
        var gauge_value = [[${diskUsage}]];

        var option = {
            backgroundColor: '',
            title: {
                show: true,
                x: 'center',
                y: '85%',
                text: '磁盘使用率',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bolder',
                    fontStyle: 'normal',
                    color: '#6eba44',
                },
            },
            series: [
                {
                    name: '磁盘使用率',
                    type: 'gauge',
                    splitNumber: 10, //刻度数量
                    min: 0,
                    max: 100,
                    radius: '90%', //图表尺寸
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            shadowBlur: 0,
                            color: [
                                [0.2, '#6eba44'],
                                [0.8, '#6eba44'],
                                [1, '#6eba44'],
                            ],
                        },
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#6eba44',
                            width: 1,
                        },
                        splitNumber: 5,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#6eba44',
                        },
                    },
                    axisLabel: {
                        distance: 0,
                        textStyle: {
                            color: '#6eba44',
                            fontSize: '16',
                        },
                        formatter: function (e) {
                            return e;
                        },
                    },
                    pointer: {
                        show: true,
                    },
                    detail: {
                        offsetCenter: [0, 40],
                        textStyle: {
                            fontSize: 22,
                            color: '#6eba44',
                        },
                        formatter: gauge_value + '%',
                    },
                    data: [
                        {
                            value: gauge_value,
                        },
                    ],
                },
            ],
        };
        return option;
    }
</script>
</body>
</html>